<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>{$title}</title>
    {css href="static/admin/css/bootstrap.min.css"}
    {css href="static/admin/css/toastr.min.css"}
    {css href="static/admin/reset.css"}
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12 bg-primary p20">
            <h1>{$title}</h1>
            <hr>
            <a href="{:url('rest/user/index')}" class="btn btn-default">用户列表页</a>
            <a href="{:url('rest/user/create')}" class="btn btn-default">添加用户</a>
        </div>
    </div>

    <div class="clearfix"></div>

{block name="main"}
    <div class="row mt50">
        <div class="col-md-6">
            <table class="table table-hover bg-info">
                <tr>
                    <th class="col-md-1">ID</th>
                    <th>NAME</th>
                    <th class="col-md-6">ACTION</th>
                </tr>

                {volist name="list" id="v" mod="2"}
                {eq name="mod" value="0"}
                <tr>
                    <td>{$v['id']}</td>
                    <td>{$v['name']}</td>
                    <td>
                        <a href="{:url('rest/user/readPage',['id'=>$v['id']])}" class="btn btn-default btn-xs">查看信息(页)</a>
                        <button class="btn btn-default btn-xs show-btn" data-toggle="modal" data-target="#myModal" data-id="{$v['id']}">查看信息(框)</button>
                        <a href="{:url('rest/user/edit', ['id'=>$v['id']])}" class="btn btn-primary btn-xs">编辑</a>
                        <button class="btn btn-danger btn-xs del-btn" data-id="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}

            </table>
        </div>
        <div class="col-md-6">
            <table class="table table-hover bg-info">
                <tr>
                    <th class="col-md-1">ID</th>
                    <th>NAME</th>
                    <th class="col-md-6">ACTION</th>
                </tr>

                {volist name="list" id="v" mod="2"}
                {eq name="mod" value="1"}
                <tr>
                    <td>{$v['id']}</td>
                    <td>{$v['name']}</td>
                    <td>
                        <a href="{:url('rest/user/readPag',['id'=>$v['id']])}" class="btn btn-default btn-xs">查看信息(页)</a>
                         <button class="btn btn-default btn-xs show-btn" data-toggle="modal" data-target="#myModal" data-id="{$v['id']}">查看信息(框)</button>
                        <a href="{:url('rest/user/edit', ['id'=>$v['id']])}" class="btn btn-primary btn-xs">编辑</a>
                        <button class="btn btn-danger btn-xs del-btn" data-id="{$v['id']}">删除</button>
                    </td>
                </tr>
                {/eq}
                {/volist}

            </table>
        </div>
    </div>
     <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">
                        用户 [<u></u>] 的详细信息
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-3">
                            <img src="/static/admin/face/batman.jpg" width="100" alt="">
                        </div>
                        <div class="col-md-9">
                            <h3></h3>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>


{/block}
</div>


{js href="static/admin/js/jquery.min.js"}
{js href="static/admin/js/bootstrap.min.js"}
{js href="static/admin/js/toastr.min.js"}
{block name="myjs"}
<script>
    $(function(){
        // 设置弹框参数
        toastr.options = {
            closeButton: true,// 是否显示关闭按钮
            progressBar: true,// 实现显示计时条
            timeOut: "3000",  // 自动关闭时间
            positionClass: "toast-bottom-left" // 提示位置
            // toast-top-full-width 顶端，宽度铺满整个屏幕
            // toast-top-right  顶端右边
        };

        // 触发删除用户
        $('.del-btn').click(function (){
            var id = $(this).attr('data-id');
            if(confirm('确定要删除吗?!')){
                var row = $(this).parents('tr');
                delAjax(id,row);    // 执行ajax删除
            }         
        });

        // 触发查询单个用户
        $('.show-btn').click(function (){
            var id = $(this).attr('data-id');
            console.log('查询操作,ID:', id);
            showAjax(id);    // 指定查看信息操作    
        });

    })


    // 执行ajax删除
    function delAjax(id,row) {
        $.ajax({
                dataType:'json',
                type: 'delete',
                url: '/users/'+id+'.html',
                success: function (data) {
                    console.log(data);
                    if (data.status) {
                        toastr.success(data.info);
                        // 将该条目删除掉
                        row.remove();
                    }else{
                        toastr.error(data.info,'WARING');
                    }
                },
                error: function (){
                    alert('AJAX 请求出现错误!');
                }
            });
    }


    // 执行ajax查询
    function showAjax(id) {
        $.ajax({
                dataType:'json',
                type: 'get',
                url: '/users/'+id+'.html',
                success: function (data) {
                    console.log(data);
                    if (data.status) {
                        $('.modal-title u').html(data.title);
                        var msg = data.datas.name+'/'+data.datas.tel;
                         $('.modal-body h3').html(msg);
                    }else{
                        $('.modal-title u').html(data.title);
                         $('.modal-body h3').html(data.datas);
                    }
                },
                error: function (){
                    alert('AJAX 请求出现错误!');
                }
            });
    }
</script>
{/block}
</body>
</html>